"use client"; // 添加这一行，使组件变为 Client Component
import { Form } from "antd";
import { useEffect } from "react";
import SubassemblyView from "./component";
import { useNodeMap } from "@/store/client/modules/reactdndStore/useNode";

const ReactDndRenderView: React.FC = () => {
  const [form] = Form.useForm();
  const { boxIndex } = useNodeMap()
  useEffect(() => {
    form.setFieldsValue({
      // label: Node?.label,
      // onChange: Node?.onChange,
    });
  }, [])


  const onValuesChange = (changedValues: Record<string, any>, allValues: Record<string, any>) => {
    console.log("变化的字段:", changedValues);
    console.log("所有字段的值:", allValues);
    const data = {
      ...Node,
      label: allValues.label,
      onChange: allValues.onChange
    }
  };

  return (
    <div className={"w-screen h-screen bg-cyan-300"}>
      <div className={'w-full  h-full '}>
        <Form
          form={form}
          name="basicRender"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onValuesChange={onValuesChange}
          autoComplete="off">
          {boxIndex['root']?.map((node:string) => {
            return <SubassemblyView key={node} id={node} />
          })}
        </Form>
      </div>
    </div>
  )

}
export default ReactDndRenderView;